<!--
 * @company : 版权所属 四川北星惯牌科技有限公司
 * @contact : 刘经理 19326416371
 -->
<template>
	<view class="box flex-row-center">
		<template v-if="addressInfo.list.length>0">
			<view class="personnel-box W100" v-for="(item,index) in addressInfo.list" :key="item.id">
				<!-- 内容 -->
				<view class="personnel-content flex-row-center W100">
					<view class="personnel-left">
						<up-avatar :text="item.first_name" fontSize="36rpx" randomBgColor></up-avatar>
					</view>
					<view class="personnel-right">
						<view class="personnel-head flex-row-center">
							<view class="name-box flex-row-center">
								<text class="name">{{item.address}}</text>
								<template>
									<up-icon name="man" v-if="item.gender==1" color="#2979ff" size="28rpx"></up-icon>
									<up-icon name="woman" v-if="item.gender==2" color="#F8BBC4" size="28rpx"></up-icon>
								</template>
							</view>
							<view class="status-box flex-center" v-if="item.default">
								<text class="TEXT">默认</text>
							</view>
						</view>
						<!-- 			<text class="phone" v-if="item.newMobile">联系方式：{{item.newMobile}}</text>
						<text class="phone" v-else>联系方式：{{item.mobile}}</text> -->
					</view>
				</view>
				<!-- 操作 -->
				<view class="option-box flex-row-center">
					<view class="option-btn flex-center borderR" @click.stop="delItem(item.id)">
						<text class="text">删除</text>
					</view>
					<view class="option-btn flex-center" @click.stop="alterSign(item)">
						<text class="writeOff-text">编辑</text>
					</view>
				</view>
			</view>
			<view class="view-more" @click="getMoreLog">
				<up-loadmore :status="addressInfo.status" />
			</view>
		</template>
		<view class="not-list-view" v-else>
			<text class="text">暂时没有添加地址~</text>
		</view>
		<view class="add-box flex-center" @click="addShowBtn">
			<up-icon name="plus" color="#0A534F" size="28rpx"></up-icon>
			<text class="text">新增地址</text>
		</view>
	</view>
	<!-- 弹出组队 -->
	<up-popup :show="addShow" @close="closeAddShow" round="18rpx" closeable mode="bottom">
		<addAddress @closeAddShow="closeAddShow" :addressInfo="editAddressInfo"></addAddress>
	</up-popup>
</template>

<script setup>
	import {
		reactive
	} from 'vue';
	import addAddress from '../components/addAddress.vue';
	import {
		maskPhoneNumber
	} from '@/utils/utools';
	const addShow = ref(false);
	const signlist = ref([]);
	const editAddressInfo = ref(null)
	const addressInfo = reactive({
		page: 1,
		list: [],
		status: 'loadmore'
	});
	onLoad(() => {
		getAddressList();
	});
	onReachBottom(() => {
		getMoreList();
	})
	const getMoreList = () => {
		if (addressInfo.status === 'loading' || addressInfo.status === 'nomore') return
		addressInfo.status = 'loading';
		setTimeout(() => {
			getAddressList();
		}, 300)
	}
	const getAddressList = async () => { //获取名片列表
		const res = await $Api.address.getList({
			page: addressInfo.page
		});
		if (res.code == 1) {
			res.data.list = res.data.list.map(val => {
				let first_name = '北';
				if (val.address) {
					first_name = val.address.charAt(0);
				}
				return {
					...val,
					first_name
				}
			})
			if (res.data.totalPage > addressInfo.page) {
				addressInfo.status = 'loadmore'
			} else {
				addressInfo.status = 'nomore'
			}

			addressInfo.list = [...addressInfo.list, ...res.data.list];
		} else {
			uni.$u.toast(res.msg);
		}
	}
	const delItem = (id) => { //删除
		uni.showModal({
			title: '提示',
			content: '确定删除该地址？',
			success: async (res) => {
				if (res.confirm) {
					uni.showLoading({
						title: '请求中'
					});
					const res = await $Api.address.delAddress({
						id
					});
					if (res.code == 1) {
						setTimeout(() => {
							uni.hideLoading();
							addStatus();
							uni.showToast({
								title: '删除成功！'
							})
							addressInfo.list = addressInfo.list.filter(val => val.id !== id);
						}, 600)
					} else {
						uni.hideLoading();
						uni.$u.toast(res.msg)
					}
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		});

	}
	const addStatus = () => { //添加名片状态
		uni.$emit('addSign', {
			type: 1
		})
	}
	const alterSign = (item) => { //修改
		editAddressInfo.value = item;
		addShow.value = true;
	}
	const closeAddShow = (type) => {
		addShow.value = false;
		editAddressInfo.value = null;
		if (type == 1) {
			restData();
			getAddressList();
		}
	}
	const restData = () => {
		addressInfo.list = [];
		addressInfo.page = 1
		addressInfo.status = 'loadmore'
	}
	const addShowBtn = () => {
		addShow.value = true;
	}
</script>

<style lang="scss" scoped>
	.box {
		padding: 20rpx;
		flex-direction: column;
	}

	.personnel-box {
		width: 100%;
		background: #222528;
		border-radius: 20rpx;
		margin-bottom: 16rpx;
		box-sizing: border-box;
		padding: 20rpx;
	}



	.personnel-content {
		padding: 20rpx;

		.personnel-right {
			margin-left: 24rpx;
			flex: 1;
			display: flex;
			flex-direction: column;
		}

		.personnel-head {
			width: 100%;
			justify-content: space-between;

			.name {
				font-size: 32rpx;
				font-weight: bold;
				color: $title-color;
				margin-right: 12rpx;
			}
		}

		.phone {
			color: $description-color;
			font-size: 28rpx;
			margin-top: 18rpx;
		}


	}

	.status-box {
		width: 96rpx;
		height: 48rpx;
		flex-shrink: 0;
		border-radius: 12rpx;
		align-self: flex-start;
		border: 1rpx solid $attention-color;
		color: $attention-color;

		.text {
			color: $attention-color;
			font-weight: bold;
			font-size: 28rpx;
		}
	}

	.option-box {
		width: 100%;
		border-top: 2rpx solid #2F3235;
		height: 80rpx;

		.option-btn {
			width: 50%;
			height: 100%;
			box-sizing: border-box;

			.text {
				font-weight: 500;
				font-size: 28rpx;
				color: #848687;
			}

			.writeOff-text {
				font-weight: 500;
				font-size: 28rpx;
				color: #99D19A;
			}
		}

		.borderR {
			border-right: 2rpx solid #2F3235;
		}
	}

	.add-box {
		width: 580rpx;
		height: 80rpx;
		background: $btn-bg-color;
		box-shadow: 0rpx 8rpx 16rpx 0rpx rgba(108, 199, 190, 0.38);
		border-radius: 40rpx;
		margin-top: 120rpx;

		.text {
			font-weight: 800;
			font-size: 30rpx;
			color: $btn-text-color;
			margin-left: 12rpx;
		}
	}
</style>